<template>
  <div class="AddOrUpdate_main add_container column_three">
    <div class="main_main">
      <div class="formItem_header">{{ showData.type }}</div>
      <el-form ref="form" :model="showData" :inline="true" label-position="top">
        <el-form-item label="问题附件" class="double">
          <FileManageFull
            :file-names="showData.opinionFileNames"
            :file-real-names="showData.opinionFileRealNames"
            :file-urls="showData.opinionUrl"
            :row-index="1"
            :readonly="true"
            @fileName="setFileName2"
          />
        </el-form-item>
        <el-form-item label="问题描述" class="notice_main">
          <rich-text
            ref="wangEditorRef"
            :disabled="editorDescription.isDisabled"
            :editor-params="editorDescription"
          />
        </el-form-item>
        <div class="formItem_header">处理进度</div>
        <div v-if="showData.responseStatus=='1'" class="adequate_space">
          <svg-icon icon-class="通过" />
          已回复
        </div>
        <div v-else class="way">正在分配运营人员，请耐心等待……</div>
        <el-form-item label="处理结果" prop="noticeContent" class="notice_main">
          <div v-if="!showData.handleResult" class="no_result">暂无处理结果</div>
          <rich-text
            v-else
            ref="wangEditorRef2"
            :disabled="editorParams.isDisabled"
            :editor-params="editorParams"
          />
        </el-form-item>
        <el-form-item label="附件" class="double">
          <FileManageFull
            :file-names="showData.responseFileNames"
            :file-real-names="showData.responseFileRealNames"
            :file-urls="showData.responseUrl"
            :row-index="1"
            :readonly="true"
            @fileName="setFileName"
          />
        </el-form-item>
      </el-form>
    </div>
    <div class="main_bottom">
      <el-button v-if="showData.status=='1'&&showData.responseStatus=='0'" @click.stop="cancelSubmit">撤销</el-button>
      <el-button type="cancel" @click.stop="cancel">关闭</el-button>
    </div>
  </div>
</template>

<script>
import { getInfo, addOrUpdate } from '@/api/superManage/systemMonitoring/feedBack'
import moment from 'moment'
export default {
  name: 'ShowDetail',
  props: {
    layerid: {},
    id: {},
    showKey: {},
    showData: {}
  },
  data() {
    return {
      formData: {
        responseFileNames: '',
        responseFileRealNames: '',
        responseUrl: '',
        description: '',
        orderTypeCode: '',
        handlePersonnel: '',
        handleTime: moment(new Date()).format('YYYY-MM-DD hh:mm'),
        handleResult: '',
        opinionFileNames: '',
        opinionFileRealNames: '',
        opinionUrl: ''
      },
      editorDescription: {
        content: '', // 富文本内容
        placeholder: '请填写内容', // 富文本占位内容
        isDisabled: true // 富文本是否禁用
      },
      editorParams: {
        content: '', // 富文本内容
        placeholder: '请填写内容', // 富文本占位内容
        isDisabled: true // 富文本是否禁用
      }
    }
  },
  created() {
  },
  mounted() {
    this.editorDescription.content = this.showData.description ? this.showData.description : ''
    this.editorParams.content = this.showData.handleResult ? this.showData.handleResult : ''
  },
  methods: {
    cancelSubmit() {
      const _this = this
      _this.$confirm('确定要撤销吗', '撤销确认', {
        confirmButtonText: '确定',
        cancelButtonText: '取消', cancelButtonClass: 'cancelConfirm',
        type: 'warning'
      }).then(function() {
        _this.showData.status = '0'
        addOrUpdate(_this.showData).then(res => {
          _this.$message({
            message: res.msg,
            type: 'success'
          })
        })
      }).catch(() => {}).finally(() => {
        _this.$layer.close(this.layerid)// 关闭弹框
        _this.$parent.refresh()
      })
    },
    setFileName(...data) {
      this.formData.responseFileNames = data[0]
      this.formData.responseFileRealNames = data[1]
      this.formData.responseUrl = data[2]
    },
    setFileName2(...data) {
      this.formData.opinionFileNames = data[0]
      this.formData.opinionFileRealNames = data[1]
      this.formData.opinionUrl = data[2]
    },
    getInfo() {
      getInfo(this.id).then(res => {
        console.log(res)
      })
    },
    onSubmit() {
      const wangEditorRef = this.$refs.wangEditorRef
      if (wangEditorRef != null) {
        const noticeContent1 = wangEditorRef.getEditorHtml()
        this.formData.handleResult = noticeContent1
        console.log(noticeContent1)
      }
      console.log(this.formData)
      // addOrUpdate().then(res => {
      //   console.log(res)
      // })
    },
    cancel() {
      this.$layer.close(this.layerid)// 关闭弹框
    }
  }
}
</script>

<style lang="less" scoped>
.no_result{
    padding:20px;
    border-radius:4px ;
    background: #f5f7fa;
    color: #c0c4cc;
    border: 1px solid #dfe4ed;
}
/deep/ .el-form-item{
    display: block !important;
    margin-bottom: 0 !important;
}
/deep/ .el-form-item__content{
    width: calc(100% - 20px)!important;
    margin: 10px;
}
    .adequate_space{
        color: #19BE6B;
        background-color:rgb(223, 249, 241) ;
        border-radius: 3px;
        padding: 3px 0;
        width: 100px;
        text-align: center;
        margin-left: 30px;
        margin-bottom: 10px;
    }
.way{
    color: #999;
    padding-left: 30px;
    padding-bottom: 20px;
}
.notice_main{
  width: 100% !important;
  /deep/ .el-textarea__inner{
    height: 400px;
    width: 100%;
  }
}
.main_main{
  padding-top: 0 !important;
}
.border_bottom{
    border-bottom: 1px solid rgba(105,105,105,0.2);
    padding-bottom: 10px;
}
.space{
    /deep/ .el-form-item__label{
        color: #666 !important;
    }
}
.noData{
  color: #c0c4cc;
}
.showPicture{
  display: flex;
  .pictureCode_div{
  }
  .file_div{
    margin-left: 10px;
    // color: blue;
  }
}
/deep/ .el-form-item{
  .el-form-item__label{
    // color: #1F51B3;
    font-size: 15px;
  }
  .el-form-item__content{
    color: #333333;
    font-size: 15px;
  }
}
.el-table {
  font-size: 15px;
}
</style>
